<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue里面通过class，属性绑定的形式，为我们的元素添加类样式。共4中方式</title>
    <script src="../lib/vue.js"></script>
    <style>
        .red {
            color: red;
        }

        .thin {
            font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5em;
        }

    </style>
</head>
<body>
<h2 style='color: red'> 我是一个h2标签</h2>

<div id="app">
    <h1 class="red , thin">这是一个很大的h1</h1>
    <!-- 这里是第一种使用方式，直接传递一个数组，注意这里的class必须使用v-bind做数据绑定-->
    <!-- 使用类的时候，类名必须用单引号包起来.可以加中括号，也可以不加，引用多个类，就必须加中括号-->
    <h2 :class="['red' , 'thin' ,'italic']">这是一个比较大的h2</h2>
    <!-- 测试3元表达式--><!-- 注意这里在数组中使用3元表达式，带了单引号的当作类处理，会去找对应的class的style，没有带单引号的当作属性处理，即回去vm中找对应的属性-->
    <!-- 这里flag为true则给他activity这个类的style，否则给一个空-->
    <h1 :class="['red' , 'italic' , flag ? 'active': '']">我来测3元表达式</h1>
    <!--但是上面的代码比较复杂， 下面直接在数据中使用一个对象，对象就有属性和值 --使用这种方式代替3元表达式，提高代码可读性-->
    <!--flag为ture表示应用active这个类，false表示不使用这个类-->
    <h1 :class="['red' , 'italic',{'active':flag}]">用于测试数组中使用属性</h1>

    <!--下面的例子直接使用对象---不必使用中括号了，属性名不需要单银行-->
    <!--在 为class 使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带可不带引号（属性里有单横线必须加''单引号），所以我们这里就没写引号。属性的值是一个标志符。-->
    <h1 :class="{red:false ,thin:true , italic:true , active:false}">直接使用对象</h1>
    <!--上面的写法，把属性直接写在了标签里面，下面可以直接把这些属性写到data里面-->
    <h1 :class="classObj">直接把属性写到data里效果是一样的</h1>
    <!--上面的classObj是一个属性的引用，这个指向data里面的属性，data里面的属性又指向{red:false ,thin:true , italic:true , active:false}这整个对象，-->
    <!--就相当于间接的引用了{red:false ,thin:true , italic:true , active:false}这个对象，所以这个写法与上面是一致的-->


</div>


<script>
    var vm = new Vue({
        el: "#app",
        data: {
            flag: true,
            classObj: {red: false, thin: true, italic: true, active: false}
        },
        methods: {}
    })

</script>

</body>
</html>